<template>
  <div class="live">
      <header>
          <div class="head">
                <span @click="gohome">◀ </span>
                <span>直播看房</span>
          </div>
      </header>
      <div class="content">
          <div class="con">
              <div class="con_top">
                  <span v-for="(item,index) in tabnav" :key="index"
                  :class="tabindex===index?'active':''"
                  @click="gotab(index)"
                  >{{item.text}}</span>
                  <div class="sqzhibo" @click="goliveing">
                      <text class="iconfont icon-zhibojianpianhaoshezhi"></text>
                      <span>申请直播</span>
                  </div>
              </div>
              <div class="con_bot">
                    <li v-for="item in listdata" :key="item">
                        <div class="imgs">
                            <img :src="item.img" alt="">
                            <span>精彩回放</span>
                        </div>
                        <div class="contentsss">
                            <h1>{{item.name}}</h1>
                            <div>
                                <text class="iconfont icon-zhibojianpianhaoshezhi"></text>
                                <span>{{item.start_time}}</span>
                            </div>
                        </div>
                    </li>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            tabindex:0,
            tabnav:[
                {
                    id:1,
                    text:'不限'
                },
                {
                    id:2,
                    text:'正在直播'
                },
                {
                    id:3,
                    text:'精彩回放'
                }
            ],
            listdata:[
                {
                    img:'http://mmbiz.qpic.cn/mmbiz_jpg/7ZpMMD1dDqLW7VWbJaLvtwdpko1wZPoSfoK4WwVmJDWwH6jrV8HlcB4C8mLVZc6s42niaQa2LV2TFDLe4kkwMtw/0?x-oss-process=style/w_6401',
                    name: "嘿！向东看！",
                    start_time: "2020-09-25 14:18",
                    end_time: "2020-09-25 16:45",
                },
                {
                    img:'http://mmbiz.qpic.cn/mmbiz_jpg/7ZpMMD1dDqLW7VWbJaLvtwdpko1wZPoSfoK4WwVmJDWwH6jrV8HlcB4C8mLVZc6s42niaQa2LV2TFDLe4kkwMtw/0?x-oss-process=style/w_6401',
                    name: "宿迁向东看！",
                    start_time: "2020-09-25 14:00",
                    end_time: "2020-09-25 18:00",
                },
                {
                    img:'http://mmbiz.qpic.cn/mmbiz_jpg/7ZpMMD1dDqIYkicUVh9Kibot7VFQmUUBE7uEWhHteN5S1yDFflkyGhdicGHpap5ZoNZPgaib61vwBPicq8CsPj67QLw/0?x-oss-process=style/w_6401',
                    name: "宿迁高铁站房价还能涨多高",
                    start_time: "2020-07-11 13:52",
                    end_time: "2020-07-11 16:40",
                },
                {
                    img:'http://mmbiz.qpic.cn/mmbiz_jpg/7ZpMMD1dDqJyMordDoS5tb5G58q0kUkq62A589vVf4cCuUv6zsIK7S5KSroO7icWjF3awxuYgf1kSGRkOZqF7og/0?x-oss-process=style/w_6401',
                    name: "金鹰开盘",
                    start_time: "2020-06-30 09:23",
                    end_time: "2020-06-30 10:21",
                },
                {
                    img:'http://mmbiz.qpic.cn/mmbiz_jpg/7ZpMMD1dDqJyMordDoS5tb5G58q0kUkq62A589vVf4cCuUv6zsIK7S5KSroO7icWjF3awxuYgf1kSGRkOZqF7og/0?x-oss-process=style/w_6401',
                    name: "金鹰直播",
                    start_time: "2020-06-30 09:00",
                    end_time: "2020-06-30 09:22",
                },
                {
                    img:'http://mmbiz.qpic.cn/mmbiz_png/7ZpMMD1dDqKJ2dFMZuSmtPrzrV0UF0EcxewdrBGaO2FW5CfnhWwlDOvvUy62k08ibOK2ia29ibEA5viaCGI96MHL7Q/0?x-oss-process=style/w_6401',
                    name: "“吾悦广场”杯2020宿迁房地产发展年会",
                    start_time: "2020-06-19 14:00",
                    end_time: "2020-06-19 16:32",
                },
            ]
        }
    },
    methods: {
        gohome:function(){
            wx.switchTab({
                url:'/pages/home/index'
            })
        },
        gotab(index){
            this.tabindex=index
        },
        goliveing:function(){
            console.log(1);
            wx.showModal({
                title: '宿迁房产网',
                content: '咨询电话：0527-84255199',
                showCancel:false,
                confirmText:'立即咨询',
                confirmColor:'#FB656A',
                success (res) {
                    if (res.confirm) {
                        wx.makePhoneCall({
                            phoneNumber: '0527-84255199' //仅为示例，并非真实的电话号码
                        })
                    }
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped>
header{
    width: 100%;
    background: linear-gradient(90deg, rgb(5,117,241), rgb(27,137,247), rgb(55,163,255));
}
.head{
    width: 90%;
    margin: 0 auto;
    height: 160rpx;
    line-height: 150rpx;
    font-size: 20px;
    color: #fff;
    display: flex;
    >span:nth-child(1){
        cursor: pointer;
    }
    >span:nth-child(2){
        margin-left: 32%;
    }
}
.content{
    width: 100%;
    .con{
        width: 84%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        .con_top{
            width: 100%;
            height: 200rpx;
            display: flex;
            align-items: center;
            >span{
                margin-left: 20rpx;
                background: rgb(246,246,246);
                padding: 16rpx 20rpx;
                border-radius: 6rpx;
            }
            >span.active{
                background: rgb(253,242,243);
                border: 1px solid rgb(233,153,161);
                color: rgb(231,147,159);
                border-radius: 6rpx;
            }
            .sqzhibo{
                width: 100rpx;
                margin-left: 50rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                >text{
                    color: rgb(252,133,137);
                    font-size: 26px;
                }
                >span{
                    font-size: 12px;
                }
            }
        }
        .con_bot{
            >li{
                width: 100%;
                height: 490rpx;
                margin-bottom: 60rpx;
                display: flex;
                flex-direction: column;
                .imgs{
                    width: 100%;
                    height: 330rpx;
                    overflow: hidden;
                    position: relative;
                    >img{
                        width: 100%;
                        height:720px;
                        // overflow: hidden;
                    }
                    >span{
                        position: absolute;
                        left: 16rpx;
                        top: 16rpx;
                        width: 180rpx;
                        height: 50rpx;
                        color: #fff;
                        background: rgb(128,154,229);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 14px;
                        border-radius: 40rpx;
                    }
                }
                .contentsss{
                    display: flex;
                    flex-direction: column;
                    >h1{
                        font-size: 20px;
                        line-height: 100rpx;
                        margin-top: 20rpx;
                    }
                    >div{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        >text{
                            color: rgb(193,177,119);
                            font-size: 20px;
                        }
                        >span{
                            font-size: 12px;
                            color: rgb(153,153,153);
                        }
                    }
                }
            }
        }
    }
}

@font-face {
  font-family: 'iconfont';  /* Project id 2639693 */
  src: url('//at.alicdn.com/t/font_2639693_p1x92950wqa.woff2?t=1624938545858') format('woff2'),
       url('//at.alicdn.com/t/font_2639693_p1x92950wqa.woff?t=1624938545858') format('woff'),
       url('//at.alicdn.com/t/font_2639693_p1x92950wqa.ttf?t=1624938545858') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-zhibojianpianhaoshezhi:before {
  content: "\e636";
  
}

.icon-zhibo:before {
  content: "\e604";
}
</style>